<template>
  <view class="wrapper">
    <arrow />
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id" @click="goProduct(item)">
        <v-image :url="item.image.path" v-if="item.image" :width="'160rpx'" :height="'160rpx'" />
        <view class="name">{{item.name}}</view>
        <view class="tag">{{item.tag}}</view>
      </view>
    </view>
    <view class="nothing" v-if="nothing">没有更多了...</view>
    <u-back-top bottom="300" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.88'}"></u-back-top>
  </view>
</template>

<script>
/**
 * 对应品牌商品
 */
import Arrow from '../../components/arrow'
import Image from '../../components/image/index'
import base64 from '../../util/base64'
import Product from '../../api/product'
const productModel = new Product()
export default {
  components: {
    Arrow,
    'v-image': Image
  },
  data() {
    return {
      list: [],
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false,
      },
      nothing: false,
      scrollTop: 0,
    }
  },
  onLoad() {
    this.getList()
  },
  onReachBottom() {
    this.getList(true)
  },
  methods: {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        productModel.brandList({
          ...this.queryList,
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          // console.log(data)
          this.title = data.title
          if (data.list.length === 0) {
            this.queryList.busy = true
            this.nothing = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        })
      }
    },
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/brand/product?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  min-height: 100vh;
  .nothing {
    font-size: 24rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    color: #cccccc;
  }
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10rpx;
    grid-auto-rows: minmax(1rpx, auto);
    .item {
      background: white;
      padding: 20rpx;
      border-radius: 10rpx;
      .name {
        font-size: 28rpx;
        height: 50rpx;
        font-weight: 700;
        overflow: hidden;
      }
      .tag {
        height: 30rpx;
        color: #999999;
        font-size: 24rpx;
        overflow: hidden;
      }
    }
  }
}
</style>
